
<template>
  <MyVanskeleton :loading="skeletonLoading">
    <template v-slot:my-content>
      <div class="company-style">
        <!-- 导航栏 start -->
        <van-nav-bar title="我的钱包" left-arrow fixed @click-left="$router.back()" />
        <!-- 导航栏 end -->

        <!-- 内容 start -->
        <div class="content-top my-wallet">
          <!-- 余额 -->
          <van-sticky :offset-top="46">
            <div class="balance">
              <p>
                <b>{{rcdCnt}}</b>
                <sub>人才点
                  <van-icon name="question-o" @click="$router.push({name:'company-my-rcdexplain'})"/>
                </sub>
              </p>
              <p>
                <van-button round type="primary" color="#07f" text="人才点充值" @click="$router.push({name:'company-my-membership'})"></van-button>
              </p>
            </div>
          </van-sticky>

          <!-- 消费/充值 -->
          <van-tabs v-model="tabIndex" animated swipeable sticky :offset-top="206">
            <van-tab title="消费记录">
              <van-list class="record-list" @load="loadData0" finished-text="没有更多了" :finished="finished0">
                <div class="item" v-for="item,index in consumeList" :key="index">
                  <p>
                    <span>{{item.recordType}}</span>
                    <span>{{item.dateStr}}</span>
                  </p>
                  <p>
                    <span>{{item.money}}</span>
                  </p>
                </div>
              </van-list>
            </van-tab>
            <van-tab title="充值记录">
              <van-list class="record-list" @load="loadData1" finished-text="没有更多了" :finished="finished1">
                <div class="item" v-for="item,index in investList" :key="index">
                  <p>
                    <span>充值</span>
                    <span>{{item.dateStr}}</span>
                  </p>
                  <p>
                    <span>{{item.money}}</span>
                  </p>
                </div>
              </van-list>
            </van-tab>
          </van-tabs>
        </div>
        <!-- 内容 end -->
      </div>
    </template>
  </MyVanskeleton>
</template>

<script>
import { NavBar, Icon, Tab, Tabs, Button, Sticky,List } from "vant";
export default {
  name: "wallet",
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Sticky.name]: Sticky,
		[List.name]: List,
  },
  // 定义属性
  data() {
    return {
      //loading
      skeletonLoading: true,
      requestLoading0: false,
      requestLoading1: false,
      finished0: false,
      finished1: false,
      //urlParams data
      rcdCnt: this.$route.query.rcdCnt,
      //response data
      consumeList: [],
      investList: [],
      //request data
      pageIndex0: 0,
      pageIndex1: 0,
      pageSize: 30,
      //tabIndex:
      tabIndex: 0,
    };
  },
  mounted() {
    this.loadData0();
		this.loadData1();
  },
  // 方法集合
  methods: {
    loadData0() {
			this.pageIndex0 ++ ;
      this.requestLoading0 = true;
      this.$api.get('/CompanyMine/GetMoneyRecordPageList', { pageIndex:this.pageIndex0,pageSize:this.pageSize,recordType:0 }).then(res => {
        this.requestLoading0 = false;
				this.skeletonLoading = false;
        if (res.success) {
          var resultList = res.response;
          //no data
          if (this.pageIndex0 == 1 && resultList.length == 0) {
            this.finished0 = true;
          }
          else {
            //no more data
            if (this.pageIndex0 != 0 && resultList.length == 0) {
              this.finished0 = true;
            }
						this.consumeList = [...this.consumeList,...resultList];
          }
        }
      })
    },
    loadData1() {
      this.pageIndex1++;
      this.requestLoading1 = true;
      this.$api.get('/CompanyMine/GetMoneyRecordPageList', { pageIndex: this.pageIndex1, pageSize: this.pageSize, recordType: 1 }).then(res => {
        this.requestLoading1 = false;
        if (res.success) {
          var resultList = res.response;
          //no data
          if (this.pageIndex1 == 1 && resultList.length == 0) {
            this.finished1 = true;
          }
          else {
            //no more data
            if (this.pageIndex1 != 0 && resultList.length == 0) {
              this.finished1 = true;
            }
						this.investList = [...this.investList,...resultList];
          }
        }
      })
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>